<template>
  <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="订单号" prop="orderNo">
            <el-input
              v-model="queryParams.orderNo"
              placeholder="请输入订单号"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="订单状态"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.order_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="userList">
          <el-table-column label="订单号" align="center" prop="orderNo"/>
          <el-table-column label="购买用户" align="center" prop="student.nickName"/>
          <el-table-column label="教师名称" align="center" prop="teacher.nickName"/>
          <el-table-column label="订单状态" align="center" prop="statusText">
            <template slot-scope="scope">
              <span  :style="{color: scope.row.status == 1 ? 'red' : ''}">{{ scope.row.statusText }}</span>
            </template>
          </el-table-column>

          <el-table-column label="订单金额" align="center" prop="payPrice"/>
          <el-table-column label="课时包（节）" align="center" prop="lessonNum"/>
          <el-table-column label="支付时间" align="center" prop="payTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.payTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-preview"
                @click="handleDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>

        </el-table>

        
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- 添加或修改用户配置对话框 -->
        <el-dialog title="订单详情" :visible.sync="open" width="900px" append-to-body>
          <el-descriptions title="学生信息" :column="3">
              <el-descriptions-item label="姓名">{{ orderInfo.student.sysUser.nickName }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{orderInfo.student.sysUser.phonenumber}}</el-descriptions-item>
              <el-descriptions-item label="英文名">{{ orderInfo.student.englishName }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{ orderInfo.student.age }}</el-descriptions-item>
              <el-descriptions-item label="注册时间">{{ orderInfo.student.createTime }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="教师信息" :column="3" style="margin-top: 20px;">
              <el-descriptions-item label="姓名">{{ orderInfo.teacher.sysUser.nickName }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{orderInfo.teacher.sysUser.phonenumber}}</el-descriptions-item>
              <el-descriptions-item label="课时价格">￥{{orderInfo.teacher.lessonPrice}}</el-descriptions-item>
              <el-descriptions-item label="分类" v-if="orderInfo.teacher.tagName">
                <el-tag size="small" v-for="(item, index) in orderInfo.teacher.tagName.split(',')" style="margin-right: 10px;">{{ item }}</el-tag>
              </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="订单信息" :column="3" style="margin-top: 20px;">
              <el-descriptions-item label="订单号">{{ orderInfo.order.orderNo }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag size="small" style="margin-right: 10px;">{{ orderInfo.order.statusText }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间" >{{ orderInfo.order.createTime }}</el-descriptions-item>
              <el-descriptions-item label="订单金额">{{ orderInfo.order.payPrice }}</el-descriptions-item>
              <el-descriptions-item label="支付时间" v-if="orderInfo.order.status == 2">{{ orderInfo.order.payTime }}</el-descriptions-item>
              <el-descriptions-item label="课程分类">{{ orderInfo.courseTag.courseTagName }}</el-descriptions-item>
              <el-descriptions-item label="课时包">{{ orderInfo.order.lessonNum }}节</el-descriptions-item>
              <el-descriptions-item label="已选课时">{{ orderInfo.order.choosedLessonNum }}节</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="课时信息" :column="1" style="margin-top: 20px;"></el-descriptions>
          <el-table :data="orderInfo.courseTime">
              <el-table-column label="课时时间" align="center">
                <template slot-scope="scope">
                  {{ scope.row.chooseDate + ' ' + scope.row.courseTime.startTime + '~' + scope.row.courseTime.endTime }}
                </template>
              </el-table-column>
              <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                  {{ selectDictLabel(dict.type.course_time_status, scope.row.status) }}
                </template>
              </el-table-column>
          </el-table>
        </el-dialog>
  </div>
</template>

<script>
import { listOrder, getOrderDetail } from "@/api/spoken/order";

export default {
  name: "Order",
  dicts: ['order_status', 'course_time_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      dateRange: [],
      userList:[],
      open:false,
      orderInfo: {
        order: {},
        teacher: {sysUser:{}},
        student: {sysUser:{}},
        courseTag: {},
        courseTime: []
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: undefined,
        status: undefined,
      },
    };
  },
 
  created() {
    this.getList();
   
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listOrder(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleDetail(row){
      this.orderInfo = {
        order: {},
        teacher: {sysUser:{}},
        student: {sysUser:{}},
        courseTag: {},
        courseTime: []
      }
      this.open = true
      getOrderDetail(row.orderId).then(res => {
        res.data.courseTime.forEach(item => {
          item.courseTime.startTime = item.courseTime.startTime.substr(0, item.courseTime.startTime.length - 3)
          item.courseTime.endTime = item.courseTime.endTime.substr(0, item.courseTime.endTime.length - 3)
        })
        this.orderInfo = res.data
      })
    }
  }
};
</script>